<template>
<div>
<el-row>
	<el-form :inline="true" :model="form" size="small">

    <!-- <el-form-item v-if="gridid == ''">
	    <el-cascader 
			style="width:350px;"
			filterable
			:options="treedata"
			:props="props1"
			filterable
			change-on-select
			v-model="selectedOptions">
		</el-cascader>
	</el-form-item> -->

	<el-form-item >
	    <el-input v-model="form.name" placeholder="河流名称" style="width:200px;"></el-input>
	</el-form-item>

	<!-- <el-form-item >
	    <el-select v-model="form.company_type"  placeholder="企业类型" style="width:200px;">
	      <el-option 
	      v-for="item in company_type"
	      :label="item.label" :value="item.value"></el-option>
	    </el-select>
	</el-form-item> -->

	<el-form-item>
	    <el-button type="primary" @click="init" style="width:100px;background:rgba(10,137,145,1);">查询</el-button>
	</el-form-item>
</el-form>
</el-row>


<el-row class="bbg3">
<el-table
    :data="list.results"
    :header-cell-style="{
		'background-color': '#169098',
	    'color': '#fff',    
	}"
    border
    height="340"
    :row-style="{
    	height : '58px'
    }"
    style="width: 100%; background:#083749;">
    <el-table-column
      prop="name"
      align="center"
      show-overflow-tooltip
      label="河流名称">
    </el-table-column>
    <el-table-column
      prop="type"
      align="center"
      label="管理人"
      >
    </el-table-column>
    <el-table-column
      prop="user"
      width="110"
      align="center"
      label="联系电话"
      >
    </el-table-column>
    <el-table-column
      prop="user1"
      align="center"
      label="河长(Km)"
      >
    </el-table-column>
  </el-table>
</el-row>

<el-row class="text-center mt20 mb20">
<el-pagination
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="pageNo"
  :page-size="pageSize"
  layout="total, prev, pager, next"
  :total="list.totalRecord">
</el-pagination>
</el-row>

</div>
</template>

<script>


export default {
	
	name : 'pwdw1',
	
	data () {
		return {

		  	form : {},

		  	props1 : {
				value : 'id',
				label : 'name',
			},

			selectedOptions : ['1'],

			list : {},

			pageNo : 1,
		  	pageSize : 5,

		  	status_label : ['', '处理中', '已完成'],

		  	status_select_label : [
				{label : '全部', value : undefined},
				{label : '处理中', value : '1'},
				{label : '已完成', value : '2'},
			],

			company_type : [],
		}
	},

	props : {
		treedata: {
			type: Array,
			default () {
				return []
			},
		},

		gridid : {
			type : String,
			default : '',
		}
	},

	components : {
	},

	computed : {
		id () {
			this.init();
			return "";
		}
	},

	methods : {
		init () {
			// let para = {
			// 	fun : 'subUnloadingList',
			// 	//grid_id : this.selectedOptions[this.selectedOptions.length - 1],
			// 	...this.form,
			// 	pageNo : this.pageNo,
			// 	pageSize : this.pageSize,
			// 	cb : res => {
			// 		console.log('subUnloadingList');
			// 		console.log(res);
			// 		this.list = res;
			// 	}
			// };

			// if(this.gridid == ''){
			// 	para['grid_id'] = this.selectedOptions[this.selectedOptions.length - 1];
			// }else{
			// 	para['grid_id'] = this.gridid;
			// }

			// this.$http(para);


			this.list = {
				results : [
					{
						name : '河流名称一',
						type : '张三',
						user : '13888888888',
						user1 : '10000',
					},
					{
						name : '河流名称二',
						type : '李四',
						user : '13888888888',
						user1 : '30000',
					},
					{
						name : '河流名称一',
						type : '张三',
						user : '13888888888',
						user1 : '10000',
					},
					{
						name : '河流名称二',
						type : '李四',
						user : '13888888888',
						user1 : '30000',
					},
					{
						name : '河流名称二',
						type : '李四',
						user : '13888888888',
						user1 : '30000',
					},
				],

				totalRecord : 5,
				pageNo : 1,
				pageSize : 5,

			}
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.init();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.init();
		},

		playback (item) {
			this.$emit('getpoint', {
				...item,
				what : 'company',
				lon : item.longitude, 
				lat : item.latitude,
			});
		},

		info () {

		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();

		// this.$http({
		// 	fun : 'getListByType',
		// 	type : 'company_type',
		// 	cb : res => {
		// 		console.log(res);
		// 		this.company_type = res;
		// 	}
		// });
	},

}
</script>

<style scoped>

</style>
